<template>
	<view style="height: 100vh; background-color: #f7f7f7;overflow: hidden;">
		<view class="nativetop" v-if="indexAyd==2">
			<text class="icongantanhao-yuankuang iconfont"
				style="color: orange;font-size: 34upx;margin-right: 10upx;"></text>
			一个订单可购5张票，还可以选择<text
				style="color: #3478f6;font-weight: 500;width: 30upx;text-align: center;">{{5-formdataA.length}}</text>
			个乘车人<text style="width: 65upx;text-align: center;">({{formdataA.length}}/5)</text>
		</view>
		<scroll-view scroll-y="true" class="contsss" :class="indexAyd==2?'contsssA':''" :show-scrollbar="true" >
			<view class="" style="height: 25upx;" v-if="formdata.length>0">

			</view>
			<view class="boxsss" v-for="(item,index) in formdata" :key="index"
				@click="indexAyd==2?xuanzes(item,index):''">
				<view class="boxsss-1 " @click.stop="Add('2',item)">
					<text class="iconfont iconxiugai" style="font-size: 52upx;"></text>
				</view>
				<view class="boxsss-2">
					<view class="boxsss-2-1">
						{{item.name}}
					</view>
					<view class="boxsss-2-2">
						手机号 {{maskPhoneNumber(item.phone)}}
					</view>
					<view class="boxsss-2-2">
						证件号 {{desensitizeIDCard(item.idCard)}}
					</view>
				</view>
				<view class="boxsss-3" v-if="indexAyd==2">
					<text class="iconfont iconxuanze-weixuanze" v-if="!item.isNewRecord"></text>
					<text class="iconfont iconxuanzhong" style="color: #3478f6;" v-if="item.isNewRecord"></text>
				</view>
			</view>
			<view class="NoData" v-if="formdata.length==0">
				<view class="NoDataA">
					<image class="NoData_images" src="@/static/imge/zanwu.svg"></image>
				</view>
				<view class="NoData_texte1">
					亲，当前暂无乘车人
				</view>
				<view class="NoData_texte2">可以先添加哦～</view>
			</view>
			<view style="padding-bottom: env(safe-area-inset-bottom);" v-if="formdata.length>0">
				<view class="" style="height: 130upx;">

				</view>
			</view>
		</scroll-view>
		<view class="boxsex">
			<view class="boxsex-1" @click="Add('1')">
				<text class="iconfont iconjia" style="font-size: 32upx;margin-right: 10upx;"></text>新增乘车人
			</view>
			<view class="boxsex-2" @click="sende" v-if="indexAyd==2">
				完 成
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				formdata: [],
				formdataA: [],
				indexAyd: 1
			}
		},
		onLoad(option) {
			this.indexAyd = option.id
			this.findList()
		},
		onShow() {
		},
		methods: {
			...mapMutations(['getData']),
			maskPhoneNumber(phone) {
				return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
			},
			desensitizeIDCard(idCard) {
				let reg = /^(.{3})(?:\d+)(.{3})$/ // 匹配身份证号前3位和后3位的正则表达式
				if (idCard) {
					return idCard.replace(reg, '\$1***********\$2')
				}
			},
			xuanzes(item, index) {
				if (this.formdata[index].isNewRecord == true) {
					this.$set(this.formdata[index], 'isNewRecord', false)
					var datas = this.formdata[index].id
					this.formdataA = this.formdataA.filter(item => item.id != datas)
				} else {
					if (this.formdataA.length < 5) {
						this.$set(this.formdata[index], 'isNewRecord', true)
						this.$set(this.formdata[index], 'carryingChildren', '1')
						item.carryingChildren = '0'
						this.formdataA.push(item)
					} else {
						uni.showToast({
							title: '只能选择5个乘车人',
							duration: 3000,
							icon: 'none'
						});
					}
				}
			},
			sende() {
				if (this.formdataA.length < 1) {
					uni.showToast({
						title: '请选择乘车人员',
						duration: 3000,
						icon: 'none'
					});
					return false
				}
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2]; //上一个页面
				prevPage.$vm.formdataA = this.formdataA
				uni.navigateBack({
					delta: 1
				})
			},
			findList() {
				var that = this
				that.formdata = []
				that.formdataA = []
				let objP = {
					pageNum: '1',
					pageSize: '100',
					userId: uni.getStorageSync('userId') ? uni.getStorageSync('userId') : ''
				}
				const obj = {
					url: 'ddPassenger/findList',
					data: objP,
					success(res) {
						that.formdata = res.datas.list
					},
					fail(res) {},
					complete(res) {}
				}
				that.getData(obj)
			},
			Add(index, e) {
				if (index == '1') {
					uni.navigateTo({
						url: '/pagesA/passengerAdd/passengerAdd'
					})
				} else {
					uni.navigateTo({
						url: '/pagesA/passengerAdd/passengerAdd?id=' + JSON.stringify(e)
					})
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.contsss {
		background-color: #f7f7f7;
		height: 100vh;
	}
	.contsssA{
		height: calc(100vh - 60upx);
	}

	.nativetop {
		display: flex;
		background-color: #fefcee;
		height: 60upx;
		align-items: center;
		justify-content: center;
		font-size: 24upx;
	}


	.boxsss {
		display: flex;
		align-items: center;
		padding: 25upx;
		padding-left: 0upx;
		background-color: #fff;
		border-radius: 12upx;
		margin: 25upx;
		margin-top: 0;
	}

	.boxsss-1 {
		flex: none;
		display: flex;
		align-items: center;
		padding: 25upx 42upx;
	}

	.boxsss-1 image {
		width: 60upx;
		height: 60upx;
	}

	.boxsss-2 {
		flex: 1;
	}

	.boxsss-2-1 {
		font-size: 32upx;
	}

	.boxsss-2-2 {
		font-size: 24upx;
		color: #999;
		margin-top: 6upx;
	}

	.boxsex {
		display: flex;
		align-items: center;
		position: fixed;
		width: 100%;
		bottom: 0;
		left: 0;
		z-index:1000;
		background-color: #fff;
		height: 130upx;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.boxsex-1 {
		flex: 1;
		height: 90upx;
		border-radius: 45upx;
		background-color: #e6f4fe;
		border: 2upx solid #3478f6;
		font-size: 30upx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 30upx;
		color: #3478f6;
	}

	.boxsex-2 {
		flex: 1;
		height: 90upx;
		border-radius: 45upx;
		background-color: #f7f7f7;
		border: 2upx solid #3478f6;
		font-size: 30upx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 30upx;
		color: #fff;
		background-color: #3478f6;
	}

	.boxsss-3 {
		flex: none;
		display: flex;
		align-items: center;

		.iconfont {
			font-size: 46upx;
			padding: 25upx;
			margin: 0 -25upx;
		}

	}
</style>